import React, { useState } from 'react'
import useLogin from '../../Hook/useLogin'
import { useSelector } from 'react-redux'
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Button } from 'antd'
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { homerouters } from '../../router';
import './index.css'
const { Header, Content, Footer, Sider } = Layout;
const Index = () => {
    const { islogin } = useLogin()
    const nav = useNavigate()
    const username = useSelector((store) => store.counter.username)
    const tc = () => {
        localStorage.clear('token')
        nav('/login')
    }

    function getItem(label, key, icon, children) {
        return {
            key,
            icon,
            children,
            label,
        };
    }
    const xr = (add) => {
        const items = [];
        add && add.forEach((item) => {
            if (item.children) {
                items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, item.icon, xr(item.children)))
            }
            else {
                items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, item.icon))
            }
        })
        return items
    }
    const items = xr(homerouters)
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const toggles = () => {
        document.body.classList.toggle('dark')
    }
    const { t, i18n } = useTranslation();
    const qh = () => {
        i18n.changeLanguage(i18n.language=== 'en' ? 'zh' : 'en')
    }
    return (
        <div>
            <div>{t("name")}</div>
            <Button onClick={toggles}>主题切换</Button>
            
            <Button onClick={qh}>中英文切换</Button>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                    <div className="demo-logo-vertical" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
                </Sider>
                <Layout>
                    <Header style={{ padding: 0, background: colorBgContainer }} >
                        <div style={{ width: '130px', float: 'right' }}>
                            <Avatar size={34} icon={<UserOutlined />} />{username}<Button onClick={tc}>退出</Button>
                        </div>
                    </Header>
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>

                        </Breadcrumb>
                        <div
                            style={{
                                padding: 24,
                                minHeight: 360,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet></Outlet>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        </div>
    )
}

export default Index
